<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>

			#container{
				/*开启弹性布局*/
				    display:flex;
				    /*wrap：换行，第一行在上方。*/
				    flex-wrap:wrap;

			}
			
			.div1{
			position: relative;
				margin: 0 auto;
				
		
			}
			
			.div1 h1{
				text-align: center;
			}
			
			input{
				margin-bottom: 15px;
			}
			input:nth-of-type(3){
				position: absolute;
				right:110px;
				top: 240px;
					
				width: 100px;
				height: 40px;
				background-color: #FA8072;
				border: 1px sandybrown solid;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
			}
			input:nth-of-type(3):hover{
				transform: scale(1.2);
				  transition:all 0.5s ease-in-out ;
				  background-color: antiquewhite;
				  cursor: pointer;
			}

			.addClass1 {

				background-image: url("/images/2.gif");
				/*防止图片没加载出来 使用颜色代替*/

				/*适配图片大小*/
				/* background-size:cover; */
				/*背景图显示方式*/
				background-repeat: no-repeat;
				/*图像定位*/
				background-position: center;
				width: 500px;
				height: 500px;
				display: block;
				background-size:cover;
				border-radius: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);


			}


		</style>


	</head>
	<body>

		<div id="container">


			<div class="div1">
				<h1>修改相册</h1>
				相册名称:<input type="text" id="upload_crowd_name" /><br>
				相册封面:<input type="file" id="crowd_file" /> <br>
				相册描述:<textarea id="upload_crowd_desc"></textarea><br>
				<input type="submit" value="提交" id="submit" />

				<input type="hidden" id="imagefile" />

			</div>

		</div>

		<span  class="id1" th:id="${#request.getAttribute('id')}"></span>
		<script th:src="@{/js/jquery-3.4.1.js}" type="text/javascript"></script>
		<script>


			var id=$(".id1").attr("id");  //此相册的图片


			$.get("/album/"+id,{},function (data) {
				console.log(data)
				$('#upload_crowd_name').val(data.data.title)
				$('#upload_crowd_desc').val(data.data.imageDescribe);
				$("#imagefile").val(data.data.image)

			},"json")





			$('#submit').click(function() {
				// alert("隐藏");
				$("#container").addClass("addClass1");
				$(".div1").hide()


				var crowd_name = $.trim($('#upload_crowd_name').val());
				var crowd_desc = $.trim($('#upload_crowd_desc').val());
				var imagefile = $.trim($('#imagefile').val());
				var crowd_file = $('#crowd_file')[0].files[0];

				var formData = new FormData();
		
				
				if( crowd_file != undefined){
					console.log(crowd_file)
						formData.append("file", crowd_file);
				}
				formData.append("title", crowd_name);
				formData.append("imageDescribe", crowd_desc);
				formData.append("image",imagefile);

				$.ajax({
					url: '/album/up/'+id,
					dataType: 'json',
					type: 'PUT',
					data: formData,
					processData: false, // 使数据不做处理
					contentType: false, // 不要设置Content-Type请求头
					
					success: function(data) {

						console.log(data);
						if (data.flag == true) {
							alert('修改成功！');
							$("#container").removeClass("addClass1");
							$(".div1").show()
							location.href = "image.html";
						}else{
							$("#container").removeClass("addClass1");
							$(".div1").show()
							alert("修改失败 :已有此名称的相册了")
						}

					},
					error: function(response) {
						console.log(response);
					}
				});
				return false ;
			})
		</script>

	</body>
</html>
